import { useEffect, useState } from 'react';
interface ImageLoaderProps {
  src: string;
  alt: string;
  className?: string;
}
const ImageLoader = ({
  src,
  alt,
  className = ''
}: ImageLoaderProps) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => setLoading(false);
    img.onerror = () => {
      setLoading(false);
      setError(true);
    };
  }, [src]);
  return <div className={`relative overflow-hidden ${className}`}>
      {loading && <div className="absolute inset-0 bg-[#151518] flex items-center justify-center">
          <div className="w-8 h-8 border-2 border-[#4361ee] border-t-transparent rounded-full animate-spin"></div>
        </div>}
      {error ? <div className="absolute inset-0 bg-[#151518] flex items-center justify-center">
          <p className="text-[#8a8f98] text-sm">Failed to load image</p>
        </div> : <img src={src} alt={alt} className={`w-full h-full object-cover transition-opacity duration-500 ${loading ? 'opacity-0' : 'opacity-100'}`} />}
    </div>;
};
export default ImageLoader;